<template>
    <div class="index">
      <mt-header class="myheader" title="学前端，到达内" fixed>
        <div slot="left">返回</div>
        <div slot="right">分享</div>
      </mt-header>

      <!-- 首页轮播图 -->
      <mt-tab-container 
        style="margin-top: 40px; margin-bottom:55px;">
        <mt-tab-container-item>
          <mt-swipe class="swipe" 
                  :style="{height:h}"
                  :auto="3000"
                  :speed="1000"
                  :show-indicators="true"
                  :continuous="true">
            <mt-swipe-item>
              <img src="../assets/1.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/2.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/3.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/4.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/5.jpg" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
              <img src="../assets/6.jpg" alt="">
            </mt-swipe-item>
          </mt-swipe>
        </mt-tab-container-item>
      </mt-tab-container>

      <!-- 底部选项卡 -->
      <mt-tabbar v-model='selected' fixed>
        <mt-tab-item id="find">
          <img v-if="selected=='find'" 
              src="../assets/find_1.png" slot="icon" alt="">
          <img v-else src="../assets/find_0.png" slot="icon" alt="">
            发现
        </mt-tab-item>
        <mt-tab-item id="collect ">
          <img v-if="selected=='collect '" 
              src="../assets/collect_1.png" slot="icon" alt="">
          <img v-else src="../assets/collect_0.png" slot="icon" alt="">
            收藏
        </mt-tab-item>
        <mt-tab-item id="order">
          <img v-if="selected=='order'" 
              src="../assets/order_1.png" slot="icon" alt="">
          <img v-else src="../assets/order_0.png" slot="icon" alt="">
            订单
        </mt-tab-item>
        <mt-tab-item id="my">
          <img v-if="selected=='my'"
             src="../assets/my_1.png" slot="icon" alt="">
          <img v-else src="../assets/my_0.png" slot="icon" alt="">
            我的
        </mt-tab-item>
      </mt-tabbar>
    </div>
</template>
<script>
export default{
  name:"Index",
  data(){
    return{
      selected:"find",
      h:"188px"
    }
  },
  methods:{
    initSwipe(){
      let picwidth = 800;
      let picheight = 400;
      // 屏幕宽
      let screenwidth = window.screen.width;
      let height = Math.floor(
          (picheight * screenwidth) / picwidth) + 'px'
      // 把计算得到的height，赋值给data中的变量，动态更新轮播图
      this.h = height;   
    }
  },
  watch:{
  }
}
</script>
<style scoped>
.myheader{
  background-color: red;
}
.swipe{
  width: 100%;
}
</style>
